import ChiVoxSDK from 'chivox';
import Config from './config';

import $ from 'jquery';

import '../css/chivox-example.css';
import '../css/paragraph.css';

let data = [
  {
    refText: "How well do you know Sunshine Town, Mr Chen?",
    audioUrl: "/static/How-well-do-you-know-Sunshine-Town-Mr-Chen.mp3"
  }, {
    refText: "I know the place very well.",
    audioUrl: "/static/I-know-the-place-very-well.mp3"
  }, {
    refText: "I moved here with my family when I was two years old and have lived here since then.",
    audioUrl: "/static/I-moved-here-with-my-family-when-I-was-two-years-old-and-have-lived-here-since-then.mp3"
  }
];

let html = '';
for (var i in data) {
  html += '<span class="part">';
  let dt = data[i].refText.split(" ");
  for (var x in dt) {
    html += '<span class="partDetail">' + dt[x] + ' </span>';
  }
  html += '</span>';
  html += '<span class="partSentScore"></span>';
}
$("#paragraphData").html(html);

let resetButtonStatus = () => {
  $("#playParagraph").html("段落播放");
  $("#recordParagraph").html("段落录音");
  $("#recordParagraphStop").hide();
  $("#replayParagraph").html("段落回放");
};

let scoreMap = { 0: "差", 1: "差", 2: "中", 3: "良", 4: "优" };

let paragraph = new ChiVoxSDK.Paragraph({
  appKey: Config.appKey,
  //mode: ChiVoxSDK.MODE.HTML5,
  sigurl: "/token",
  data: data,
  playDing: true, //play 'ding'

  onError: (error) => { console.error('[ Paragraph ]:', error); },
  onReset: () => {
    $("#paragraphData .partSentScore").removeClass("score0 score1 score2 score3 score4").html("");
    $("#paragraphData .part .partDetail").removeClass("score0 score1 score2 score3 score4");
    $("#paragraphData .part").removeClass("partActive");
  },

  onBeforePlay: (i) => { $("#paragraphData .part").eq(i).addClass("partActive"); },
  onPlay: () => { $("#playParagraph").html("播放停止"); },
  onAfterPlay: (i) => { $("#paragraphData .part").eq(i).removeClass("partActive"); $("#playParagraph").html("段落播放"); },

  onBeforeRecord: (i) => { $("#paragraphData .part").eq(i).addClass("partActive"); },
  onRecord: () => {
    resetButtonStatus();
    $("#recordParagraph").html("录音停止");
    $("#recordParagraphStop").show();
  },
  onAfterRecord: (i) => { $("#paragraphData .part").eq(i).removeClass("partActive"); $("#recordParagraph").html("段落录音"); $("#recordParagraphStop").hide(); },
  onScore: (data, partIndex) => {
    var resultObj = new ChiVoxSDK.EnSentScore(data);
    if (resultObj.hasError()) {
      $("#paragraphData .partSentScore").eq(partIndex).html("ERROR");
    } else {
      var pron = resultObj.getPron();
      $("#paragraphData .partSentScore").eq(partIndex).addClass("score" + pron).html(scoreMap[pron]);

      for (var i = 0; i < resultObj.getWordSize(); i++) {
        var ds = resultObj.getWord(i).getScore();
        $("#paragraphData .part").eq(partIndex).find(".partDetail").eq(i).addClass("score" + ds);
      }
    }
  },

  onBeforeReplay: (i) => { $("#paragraphData .part").eq(i).addClass("partActive"); },
  onReplay: () => { resetButtonStatus(); $("#replayParagraph").html("回放停止"); },
  onAfterReplay: () => { $("#replayParagraph").html("段落回放"); }
});


$("#recordParagraphStop").unbind("click").click( () => { paragraph.recorder.stopRecord(); });

$('#info').text(`ChiVoxSDK ver: ${ChiVoxSDK.VERSION}, mode: ${ChiVoxSDK.mode(paragraph.options.mode)}`);
